<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	#ul1,body{margin:0;padding: 0;}
	#ul1 li{width:100px;height:50px;line-height: 50px;text-align: center;color:#fff;font-size: 16px;list-style: none; background-color: red; margin:0 10px;float: left;}
	#div1,#div2{width: 600px; height: 1px; background-color: #000; position: absolute;left: 0;}
	#div1{top: 50px;}
	#div2{top: 500px;}
	</style>
	<script type="text/javascript">
	window.onload = function (){
		var oUl = document.getElementById('ul1');
		var aLi = oUl.getElementsByTagName('li');

		for (var i = 0; i < aLi.length; i++) {
			aLi[i].onmouseover = function (){
				var that = this;
				doMove(that, 'height', 500);
			}

			aLi[i].onmouseout = function (){
				var that = this;
				doMove(that, 'height', 50);
			}
		};
	}
		
	function doMove(obj, attr, target){
		obj.iSpeed = 0;

		clearInterval(obj.timer);
		obj.timer = setInterval(function (){
			iCur = parseInt(getStyle(obj, attr));
			obj.iSpeed += (target - iCur)/5;
			obj.iSpeed *= 0.7;
			iCur += obj.iSpeed;

			obj.style[attr] = iCur + 'px';

			if (Math.abs(target - iCur) < 1 && Math.abs(obj.iSpeed) < 1) {
				obj.style[attr] = target + 'px';
				clearInterval(obj.timer)
			};
		},30);
	}

	function getStyle(obj, attr){
		return obj.currentStyle ? obj.currentStyle : getComputedStyle(obj)[attr];
	}
	</script>
</head>
<body>
	<ul id="ul1">
		<li>菜单一</li>
		<li>菜单二</li>
		<li>菜单三</li>
		<li>菜单四</li>
	</ul>
	<div id="div1"></div>
	<div id="div2"></div>
</body>
</html>